<template>
  <div class="page">
    <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="handleClose">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <DialogForm ref="formComponent" slot="slot1" :formConfig="formConfig" />
        <div slot="slot2">
          <LsdTable slot="zhry" :compRef="tableList.compRef" ref="gjxm" :columns="tableList.columns"
            :tableData="tableList.tableData" :tableAttr="tableList.tableAttr"
            :isSequenceFlag="tableList.isSequenceFlag" />
        </div>
        <div slot="slot3">
          <LsdTable slot="fzfz" :compRef="tableList1.compRef" ref="gjxm1" :columns="tableList1.columns"
            :tableData="tableList1.tableData" :tableAttr="tableList1.tableAttr"
            :isSequenceFlag="tableList1.isSequenceFlag" />
        </div>
        <div slot="slot4">
          <DialogForm ref="formComponent3" :formConfig="formConfig3" />
        </div>
        <div slot="slot5">
          <DialogForm ref="formComponent4" :formConfig="formConfig4" />
        </div>
      </LsdDialogTitle>
    </LsdDialog>
  </div>
</template>

<script>

export default {
  name: "Approval",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: function () {
        return "";
      }
    }
  },
  data() {
    return {
      // 弹窗表单信息
      formConfig4: {
        formData: [
          {
            type: "input",
            label: "审批意见",
            prop: "emergencyEvent",
            class: "sjgy",
            lableWidth: "100px"
          },
          {
            type: "input",
            label: "审批人",
            prop: "eventName",
            class: "third",
            disabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "eventLvName",
            class: "third",
            disabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "审批时间",
            prop: "effectRange",
            class: "third",
            disabled: true,
            lableWidth: "120px"
          }

        ]
      },
      formConfig3: {
        disabled: true,
        formData: [
          // {
          //   type: "select",
          //   label: "应急事件",
          //   prop: "emergencyEvent",
          //   class: "sjgy",
          //   lableWidth: "100px",
          //   option: []
          // },
          {
            type: "input",
            label: "填报人",
            prop: "creator",
            class: "third",
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "createDeptName",
            class: "third",
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "填报时间",
            prop: "createTime",
            class: "third",
            lableWidth: "120px"
          }
        ]
      },
      tableList1: {
        isSelectFlag: true,
        compRef: "fzfz",
        isSequenceFlag: false,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "响应命令单列表",
        actions: [],
        tableData: [
          {
            measureRequire: "",
            dutyDeptId: ""
          }
        ],
        columns: [
          {
            prop: "gzzmc",
            label: "工作组名称",
            align: "center",
            "min-width": "80px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "select",
                      id: "gzzmc",
                      label: "工作组名称",
                      // dic: "dic_zrbm",
                      attrs: {
                        value: "",
                        clearable: true,
                        filterable: true,
                        disabled: true,
                        multiple: false,
                        "collapse-tags": true
                      },
                      options: this.gzzmclist
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "zuz",
            label: "组长",
            align: "center",
            "min-width": "70px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "select",
                      id: "zuz",
                      label: "组长",
                      // dic: "dic_zrbm",
                      attrs: {
                        value: "",
                        clearable: true,
                        filterable: true,
                        disabled: true,
                        multiple: false,
                        "collapse-tags": true
                      },
                      options: this.zuzlist
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "lxfs",
            label: "联系方式",
            align: "center",
            "min-width": "80px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "input",
                      id: "lxfs",
                      label: "联系方式",
                      attrs: {
                        // disabled:
                        //   _this.operat === "review" ||
                        //   !["task999"].includes(_this.$route.query.task) ||
                        //   ["task2", "task3"].includes(
                        //     _this.$route.query.returnFlow
                        //   ),
                        disabled: true,
                        value: "",
                        placeholder: "请输入",
                        min: 0,
                        type: "text"
                      }
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "dwjbm",
            label: "单位及部门",
            align: "center",
            "min-width": "100px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "select",
                      id: "dwjbm",
                      label: "单位及部门",
                      // dic: "dic_zrbm",
                      attrs: {
                        value: "",
                        clearable: true,
                        filterable: true,
                        disabled: true,
                        multiple: false,
                        "collapse-tags": true
                      },
                      options: this.dwjbmlist
                      // [
                      // {
                      //   label: "111",
                      //   value: 1
                      // },
                      // {
                      //   label: "222",
                      //   value: 2
                      // },
                      // {
                      //   label: "333",
                      //   value: 3
                      // }
                      // ]
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "zw",
            label: "职务",
            align: "center",
            "min-width": "80px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "select",
                      id: "zw",
                      label: "职务",
                      // dic: "dic_zrbm",
                      attrs: {
                        value: "",
                        clearable: true,
                        filterable: true,
                        disabled: true,
                        multiple: false,
                        "collapse-tags": true
                      },
                      options: this.zwlist
                      // [
                      // {
                      //   label: "111",
                      //   value: 1
                      // },
                      // {
                      //   label: "222",
                      //   value: 2
                      // },
                      // {
                      //   label: "333",
                      //   value: 3
                      // }
                      // ]
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "cy",
            label: "成员",
            align: "center",
            "min-width": "80px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "select",
                      id: "cy",
                      label: "成员",
                      // dic: "dic_zrbm",
                      attrs: {
                        value: "",
                        clearable: true,
                        filterable: true,
                        disabled: true,
                        multiple: false,
                        "collapse-tags": true
                      },
                      options: this.cylist
                      // [
                      // {
                      //   label: "111",
                      //   value: 1
                      // },
                      // {
                      //   label: "222",
                      //   value: 2
                      // },
                      // {
                      //   label: "333",
                      //   value: 3
                      // }
                      // ]
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "zz",
            label: "职责",
            align: "center",
            "min-width": "200px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "input",
                      id: "zz",
                      label: "职责",
                      attrs: {
                        // disabled:
                        //   _this.operat === "review" ||
                        //   !["task999"].includes(_this.$route.query.task) ||
                        //   ["task2", "task3"].includes(
                        //     _this.$route.query.returnFlow
                        //   ),
                        disabled: true,
                        value: "",
                        placeholder: "请输入",
                        min: 0,
                        type: "text"
                      }
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          }
        ],
        tableAttr: {
          "max-height": "470px",
          height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      tableList: {
        isSelectFlag: true,
        compRef: "zhry",
        isSequenceFlag: false,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "响应命令单列表",
        actions: [],
        tableData: [
          {
            gw: "",
            name: "",
            lxfs: "",
            dwjbm: "",
            zw: "",
            zz: ""
          }
        ],
        columns: [
          {
            prop: "gw",
            label: "岗位",
            align: "center",
            "min-width": "60px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "input",
                      id: "gw",
                      label: "岗位",
                      attrs: {
                        // disabled:
                        //   _this.operat === "review" ||
                        //   !["task999"].includes(_this.$route.query.task) ||
                        //   ["task2", "task3"].includes(
                        //     _this.$route.query.returnFlow
                        //   ),
                        disabled: true,
                        value: "",
                        placeholder: "请输入",
                        min: 0,
                        type: "text"
                      }
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "name",
            label: "姓名",
            align: "center",
            "min-width": "60px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "select",
                      id: "name",
                      label: "姓名",
                      // dic: "dic_zrbm",
                      attrs: {
                        value: "",
                        clearable: true,
                        filterable: true,
                        disabled: true,
                        multiple: false,
                        "collapse-tags": true
                      },
                      options: this.namelist
                      // [
                      // {
                      //   label: "111",
                      //   value: 1
                      // },
                      // {
                      //   label: "222",
                      //   value: 2
                      // },
                      // {
                      //   label: "333",
                      //   value: 3
                      // }
                      // ]
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "lxfs",
            label: "联系方式",
            align: "center",
            "min-width": "60px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "input",
                      id: "lxfs",
                      label: "联系方式",
                      attrs: {
                        // disabled:
                        //   _this.operat === "review" ||
                        //   !["task999"].includes(_this.$route.query.task) ||
                        //   ["task2", "task3"].includes(
                        //     _this.$route.query.returnFlow
                        //   ),
                        disabled: true,
                        value: "",
                        placeholder: "请输入",
                        min: 0,
                        type: "text"
                      }
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "dwjbm",
            label: "单位及部门",
            align: "center",
            "min-width": "100px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "select",
                      id: "dwjbm",
                      label: "单位及部门",
                      // dic: "dic_zrbm",
                      attrs: {
                        value: "",
                        clearable: true,
                        filterable: true,
                        disabled: true,
                        multiple: false,
                        "collapse-tags": true
                      },
                      options: this.dwjbmlist
                      // [
                      // {
                      //   label: "111",
                      //   value: 1
                      // },
                      // {
                      //   label: "222",
                      //   value: 2
                      // },
                      // {
                      //   label: "333",
                      //   value: 3
                      // }
                      // ]
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "zw",
            label: "职务",
            align: "center",
            "min-width": "80px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "select",
                      id: "zw",
                      label: "职务",
                      // dic: "dic_zrbm",
                      attrs: {
                        value: "",
                        clearable: true,
                        filterable: true,
                        disabled: true,
                        multiple: false,
                        "collapse-tags": true
                      },
                      options: this.zwlist
                      // [
                      // {
                      //   label: "111",
                      //   value: 1
                      // },
                      // {
                      //   label: "222",
                      //   value: 2
                      // },
                      // {
                      //   label: "333",
                      //   value: 3
                      // }
                      // ]
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "zz",
            label: "职责",
            align: "center",
            "min-width": "200px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "input",
                      id: "zz",
                      label: "职责",
                      attrs: {
                        // disabled:
                        //   _this.operat === "review" ||
                        //   !["task999"].includes(_this.$route.query.task) ||
                        //   ["task2", "task3"].includes(
                        //     _this.$route.query.returnFlow
                        //   ),
                        disabled: true,
                        value: "",
                        placeholder: "请输入",
                        min: 0,
                        type: "text"
                      }
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          }
        ],
        tableAttr: {
          "max-height": "470px",
          height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 弹窗表单信息
      formConfig: {
        disabled: true,
        formData: [
          {
            type: "select",
            label: "响应命令单",
            prop: "responseName",
            dic: "dic_xymld",
            class: "sjgy",
            lableWidth: "120px",
            isShow: true,
            option: []
          },
          {
            type: "input",
            label: "指挥部名称",
            prop: "zhbjb",
            class: "sjgy",
            lableWidth: "120px"
          },
          {
            type: "select",
            label: "指挥部模板",
            prop: "zhbmb",
            dic: "dic_zhbmb",
            class: "sjgy",
            lableWidth: "120px",
            isShow: true,
            option: []
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "基本信息",
          name: "1",
          slot: "slot1"
        },
        {
          title: "指挥人员",
          name: "2",
          slot: "slot2"
        },
        {
          title: "工作分组",
          name: "3",
          slot: "slot3"
        },
        {
          title: "填报信息",
          name: "4",
          slot: "slot4"
        },
        {
          title: "审批信息",
          name: "5",
          slot: "slot5"
        }
      ],
      // 弹窗信息
      dialogConfig: {
        title: "响应命令单",
        isShow: false, // 弹窗显示隐藏
        btnList: [
          {
            name: "同意",
            id: "agree", // 事件名
            type: "primary",
            size: "small"
          },
          {
            name: "驳回",
            id: "reject",
            size: "small"
          },
          {
            name: "取消",
            id: "cancel",
            size: "small"
          }
        ]
      },
      activeNames: ["1", "2", "3", "4", "5"],
      cylist: [],
      zuzlist: [],
      gzzmclist: [],
      xmlist: [],
      xymldlist: [],
      zhbmblist: [],
      spxxform: {
        yj: "同意!",
        spr: "朱望林",
        dwjbm: "国网湖北省电力有限公司",
        spsj: "2021-08-12 09:52:00"
      },
      form: {
        zhbmc: "国网湖北省电力有限公司应对8·12随州市随县柳林镇（暴雨）应急指挥部",
        responseName: "国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）Ⅲ级应急响应命令〔2021〕第 03 号",
        zhbmb: "暴雨Ⅲ级应急响应指挥部模板"
      },
      rules: {
        zhbmc: [
          { required: true, message: "请输入指挥部名称", trigger: "blur" }
        ],
        xymld: [
          { required: true, message: "请选择响应命令单", trigger: "change" }
        ],
        zhbmb: [
          { required: true, message: "请选择指挥部模板", trigger: "change" }
        ]
      },
      tableDatagz: [
        {
          gzzmc: "综合协调组",
          zuz: "万武",
          lxfs: "13088884444",
          dwjbm: "国网湖北省电力有限公司安监部",
          zw: "副主任",
          cy: "龚晓曦、罗俊坤、袁军",
          zz: "执行指挥部工作部署，协调开展各项应急工作。"
        },
        {
          gzzmc: "安全督导组",
          zuz: "乾云",
          lxfs: "13088885555",
          dwjbm: "国网湖北省电力有限公司安监部",
          zw: "副主任",
          cy: "汤文军、周勇、胡国涛",
          zz: "负责组织开展抢修救援现场安全监督检查。"
        },
        {
          gzzmc: "抢修恢复组",
          zuz: "杨忠",
          lxfs: "13088886666",
          dwjbm: "国网湖北省电力有限公司安监部",
          zw: "主任",
          cy: "钟学军、辛红军",
          zz: "负责落实总指挥的工作安排，负责组织开展电网设备、设施抢修恢复和抢险救灾工作"
        },
        {
          gzzmc: "电网调控组",
          zuz: "孙霞",
          lxfs: "13088887777",
          dwjbm: "国网湖北省电力有限公司调控中心",
          zw: "主任",
          cy: "王林、毛辉、周勇",
          zz: "负责及时调整电网运行方式，实施电网故障处置"
        },
        {
          gzzmc: "后勤保障组",
          zuz: "王军",
          lxfs: "13088888888",
          dwjbm: "国网湖北省电力有限公司后勤部",
          zw: "主任",
          cy: "王平、张林、王强",
          zz: "负责做好应急过程中餐饮、住宿、会务、保洁、医疗等后勤保障工作"
        },
        {
          gzzmc: "现场工作组",
          zuz: "万武",
          lxfs: "13088889999",
          dwjbm: "国网湖北省电力有限公司安监部",
          zw: "副主任",
          cy: "张京、李盛",
          zz: "协调开展各项应急工作"
        }
      ],
      tableData: [
        {
          gw: "总指挥",
          name: "朱望林",
          lxfs: "13088880000",
          dwjbm: "国网湖北省电力有限公司",
          zw: "副总经理",
          zz: "负责突发事件总体指挥决策工作。"
        },
        {
          gw: "副总指挥",
          name: "刘俊浩",
          lxfs: "13088881111",
          dwjbm: "国网湖北省电力有限公司",
          zw: "副总工程师",
          zz: "协助总指挥负责对突发事件应对进行指挥协调，主持应急会商会，必要时作为现场工作组组长带队赴事发现场指导处置工作"
        },
        {
          gw: "指挥长",
          name: "罗维超",
          lxfs: "13088882222",
          dwjbm: "国网湖北省电力有限公司",
          zw: "主任",
          zz: "负责突发事件应急处置的统筹组织管理，执行落实总指挥的工作部署，领导指挥本部各工作组，指导协调事发单位开展应急处置工作"
        },
        {
          gw: "副指挥长",
          name: "张彪",
          lxfs: "13088883333",
          dwjbm: "国网湖北省电力有限公司",
          zw: "副主任",
          zz: "协助指挥长组织做好事件应急处置工作，并在指挥长不在时代行其职责。"
        }
      ]
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getinfo();
          this.dialogConfig.isShow = true;
        } else {
          this.dialogConfig.isShow = false;
          this.$emit("list");
          this.cancel();
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getinfo() {
      this.tableList.tableData = this.tableData;
    },
    handleBtn(item) {
      this[item.id]();
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    agree() {
      this.$emit("update:visible", false);
    },
    reject() {
      this.$emit("update:visible", false);
    },
    cancel() {
      this.$emit("update:visible", false);
    }
  }
};
</script>

<style scoped lang="less">
.leftLine {
  width: 6px;
  height: 20px;
  background: #236dfe;
  border-radius: 4px;
  margin: auto 8px auto 0;
}

.title {
  border-bottom: 1px solid #ccc;
  padding-bottom: 8px;
}

.card {
  margin-bottom: 20px;
}

.content {
  width: 90%;
  position: relative;
  left: 5%;

  p {
    font-size: 16px;
    margin-top: 12px;
  }

  table tr td {
    border: 1px solid #000;
    font-size: 12px;
    text-align: center;
    padding: 10px;
  }
}
</style>
